<template>
    <div>
        <!-- 移动端 -->
        <div class="linebox_mobile" v-if="ismobile">
            <div class="kuangleft">
                <div class="kuangbg"></div>
            </div>
            <div class="rightwords">
                <h1 class="titles">{{ miantitle }}</h1>
                <p class="p">{{ explaintitle }}</p>
            </div>
        </div>
        <!-- pc端 -->
        <div class="linebox ispc" v-if="!ismobile">
            <div class="kuangleft">
                <div class="kuangbg"></div>
            </div>
            <div class="rightwords">
                <div class="titles">{{ miantitle }}</div>
                <p class="p">{{ explaintitle }}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'headers',
    data() {

        return {
            ismobile: false
        }

    },
    props: {
        miantitle: {
            default: ""
        },
        explaintitle: {
            default: ""
        },
    },
    mounted() {
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });
    },
    methods: {

    },
}
</script>
<style lang="scss" scoped>
.linebox_mobile {
    padding: 18px;
    overflow: hidden;

    .p {
        color: #33bed2;
        margin: 0;
        margin-left: 20px;
        font-size: 0.8rem;
        padding-top: 2px;
        display: block;
        clear: both;
    }

    .kuangleft {
        float: left;
    }

    .rightwords {
        float: left;
    }

    .titles {
        font-size: 1rem;
        color: #009aff;
        float: left;
        margin-left: 8px;
        font-weight: bold;
    }

    .kuangbg {
        background-color: #009aff;
        min-width: 1rem;
        width: 1rem;
        min-height: 1rem;
        float: left;
    }
}

.linebox {
    overflow: hidden;
    margin-top: 90px;
    margin-bottom: 30px;

    .p {
        // color: #33bed2;
        // margin-left: 20px;
        // font-size: 25px;
        // margin-top: 40px;


        color: #33bed2;
        margin: 0;
        margin-left: 20px;
        font-size: 25px;
        padding-top: 10px;
        display: block;
        clear: both;
    }

    .kuangleft {
        float: left;
    }

    .rightwords {
        float: left;
    }

    .titles {
        font-size: 25px;
        color: #009aff;
        float: left;
        margin-left: 15px;
        font-weight: bold;
        margin: 0;
    }

    .kuangbg {
        background-color: #009aff;
        min-width: 21px;
        width: 17px;
        min-height: 23px;
        float: left;
    }
}

h1 {
    margin: 0;

}
</style>